﻿<!DOCTYPE HTML>
<html>
<head>
    <title>Smith Dialog Demo</title>
    <link href="smithdialog.css" rel="stylesheet" type="text/css" />
    <script src="smithdialog.js" type="text/javascript"></script>
    <style type="text/css">
    body{ color:#393939; font-family: 'Segoe UI', Verdana, Arial, Tahoma; font-size: 13px; margin:0; padding:10px 20px; }
    h1,h2,h3,h4,h5,h6{ line-height:normal; margin:0; } h1{ font-size:18px; padding:8px 0; } h3{ font-size: 13px; padding:5px 0; } p{ margin:0; padding:3px 0; }
    input{ margin:5px; padding:2px 3px; } span{ margin-right:10px; }
    .section{ border-bottom:1px dashed #efefef; margin:5px 0 0 0; padding:10px 0; }
    .code{ background:#efefef; color:#090909; font-family:Consolas, 'Courier New'; font-size:12px; display:block; line-height:20px; margin:5px 0; padding:8px; }
    .footer{ margin:20px 0 160px 0;}
    </style>    
    <script type="text/javascript">
        var d1 = null, d2 = null, d3 = null, d4 = null;
        window.onload = function () {
            d1 = new SmithDialog('d1');
            d2 = new SmithDialog('d2', { title: 'About' });
            d3 = new SmithDialog('d3', { title: 'Google', src: 'http://www.bing.com', width: 800, height: 480 });
        }
    </script>
</head>
<body>
    <h1>Smith Dialog</h1>
    <p>
        <span>Author: John Smith</span>
        <span>Version: 1</span>
        <span>License: GPL</span>
    </p>
    <div>
        <p>Smith Dialog is to show a modal dialog on you web page to provide extra interaction.</p>
        <p>To use this control, first include the css file &quot;smithdialog.css&quot; and javascript file &quot;smithdialog.js&quot; in the head of your html page.</p>
        <div class="code">        
            &lt;link href=&quot;smithdialog.css&quot; rel=&quot;Stylesheet&quot; type=&quot;text/css&quot; /&gt;<br />
            &lt;script src=&quot;smithdialog.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
        </div>
    </div>
    <div class="section">
        <h3>Example 1</h3>
        <p>Show an empty dialog.</p>
        <div class="code">            
            &lt;script type=&quot;text/javascript&quot;&gt;<br />
            &nbsp;&nbsp;&nbsp; var d1 = null;
            <br />
            &nbsp;&nbsp;&nbsp; window.onload = function () {
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; d1 = new SmithDialog(&#39;d1&#39;);
            <br />
            &nbsp;&nbsp;&nbsp; }<br />
            &lt;/script&gt;<br />
            ...<br />
            &lt;a href=&quot;#&quot; onclick=&quot;return d1.show();&quot;&gt;Empty Dialog&lt;/a&gt;</div>
        <p><a href="#" onclick="return d1.show();">Show Empty Dialog</a></p>
    </div>
    <div class="section">
        <h3>Example 2</h3>
        <p>Show an dialog with dom element content.</p>
        <div class="code">            
            &lt;script type=&quot;text/javascript&quot;&gt;<br />
            &nbsp;&nbsp;&nbsp; var d2 = null;
            <br />
            &nbsp;&nbsp;&nbsp; window.onload = function () {
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; d2 = new SmithDialog(&#39;d2&#39;, { title: &#39;About&#39; });<br />
            &nbsp;&nbsp;&nbsp; }<br />
            &lt;/script&gt;<br />
            ...<br />
            &lt;a href=&quot;#&quot; onclick=&quot;return d2.show();&quot;&gt;Dialog 
            With Dom Element Content&lt;/a&gt;</div>
        <p><a href="#" onclick="return d2.show();">Dialog With Dom Element Content</a></p>
        <div id="d2">
            <p>Hi, this is something about Smith Dialog.</p>
            <p>Smith Dialog is a pure javascript control for web client divelopment.</p>
            <p>It provides a simple way to make customizable modal dialog.</p>
            <p>Please check out the demo page to see what it can do.</p>
        </div>
    </div>
    <div class="section">
        <h3>Example 3</h3>
        <p>Show an dialog with another page.</p>
        <div class="code">            
            &lt;script type=&quot;text/javascript&quot;&gt;<br />
            &nbsp;&nbsp;&nbsp; var d3 = null;
            <br />
            &nbsp;&nbsp;&nbsp; window.onload = function () {
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; d3 = new SmithDialog(&#39;d3&#39;, { title: &#39;Google&#39;, src: 
            &#39;http://ipv6.google.com&#39;, width: 800, height: 480 });<br />
            &nbsp;&nbsp;&nbsp; }<br />
            &lt;/script&gt;<br />
            ...<br />
            &lt;a href=&quot;#&quot; onclick=&quot;return d3.show();&quot;&gt;Dialog With Source&lt;/a&gt;</div>
        <p><a href="#" onclick="return d3.show();">Dialog With Source</a></p>
    </div>    
    <div class="footer">        
        <p><strong>Any help and suggestion for improving this control is welcome!</strong></p>
        <p>you can contact me with this email: <a href="mailto:john.smith.17th@gmail.com">john.smith.17th@gmail.com</a></p>
        <p>Last edit at 2011/07/14 by John Smith.</p>
    </div>
</body>
</html>
